""<template>
  <div
    class="linechart paytime"
    style="height: 28.5rem; opacity: 1;"
  />
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/dashboard/components/mixins/resize'
import { AjaxToken } from '@/api/common'
import { AjaxGet } from '@/api/common'
import { Loading } from 'element-ui'
import 'url-search-params-polyfill'
export default {
  mixins: [resize],
  props: {
    CpnID: "",
    ChnanelId: "",
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    // StDt: {
    //   deep: true,
    //   handler(val) {
    //     this.chart = null
    //     this.initChart()
    //   }
    // },
    // EdDt: {
    //   deep: true,
    //   handler(val) {
    //     this.chart = null
    //     this.initChart()
    //   }
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this)
    },
    setOptions(thisobj) {
      this.Seach()
    },
    Seach() {
      var params = new URLSearchParams()
      params.append('CpnID', this.CpnID)
      params.append('StDt', this.StDt)
      params.append('EdDt', this.EdDt)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',

        target: document.querySelector('.paytime')
      })
      backstage.GetChartPayTime(this, params, loading)
    }
  }
}
var backstage = {
  // 获取Mngrbaseinfo集合
  GetChartPayTime: function(thisobj, params, loading) {
    AjaxToken(
      thisobj,
      'GetChartPayTime',
      params,
      'post',
      function(res) {
        loading.close()
        var result = res.data.data
        // console.log(result)
        // console.log(result[0].linedata_x.slice(0, 10))
        var linedata_x = result[0].linedata_x.slice(0, 10)
        var chartdatas = result
        var legenddata = []
        result.forEach((element) => {
          legenddata.push(element.name)
        })

        var barBorderRadius = [15, 15, 15, 15]
        var option = {
          title: {
            text: '当月渠道交易响应用时比例',
            left: 20,
            // 原画标题调整
            textStyle: {
              // 文字颜色
              color: 'rgba(0, 0, 0, 0.85)',
              // 字体风格,'normal','italic','oblique'

              // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontWeight: 'bold',
              // 字体系列
              fontFamily: 'sans-serif',
              // 字体大小
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['1秒以内', '1~2秒', '2~3秒', '3~5秒', '5秒以上'],
            orient: 'vertical',
            right: 'right',
            top: '25%'
            // icon: "circle",
          },
          grid: {
            left: '1%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',

            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              },
              formatter: function(params) {
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 4 // 一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params
                }
                return newParamsName
              }
              // rotate:50,
            },
            axisTick: {
              // 坐标轴刻度相关设置。
              show: false
            },
            axisLine: {
              // 坐标轴轴线相关设置
              lineStyle: {
                color: '#E5E9ED'
                // opacity:0.2
              }
            },
            splitLine: {
              // 坐标轴在 grid 区域中的分隔线。
              show: false,
              lineStyle: {
                color: '#E5E9ED'
                // 	opacity:0.1
              }
            }
          },
          yAxis: {
            type: 'category',
            data: linedata_x,
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E5E9ED'
                // 	opacity:0.1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#E5E9ED'
                // 	opacity:0.1
              }
            }
          },
          series: [
            {
              name: '1秒以内',
              type: 'bar',
              stack: '总量',
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: '#1890FF'
                  // barBorderRadius: barBorderRadius,
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside'
                }
              },
              z: 10,
              data: result[0].data.slice(0, 10)
            },
            {
              name: '1~2秒',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  color: '#13C2C2',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#13C2C2',
                  // barBorderRadius: barBorderRadius,
                  shadowOffsetX: 0
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside'
                }
              },
              z: 5,
              data: result[1].data.slice(0, 10)
            },
            {
              name: '2~3秒',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  // barBorderRadius: barBorderRadius,
                  color: '#2FC25B',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#2FC25B',
                  shadowOffsetX: 0
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside'
                }
              },
              data: result[2].data.slice(0, 10)
            },
            {
              name: '3~5秒',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  // barBorderRadius: barBorderRadius,
                  color: '#FACC14',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#FACC14',
                  shadowOffsetX: 0
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside'
                }
              },
              data: result[3].data.slice(0, 10)
            },

            {
              name: '5秒以上',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  // barBorderRadius: barBorderRadius,
                  color: '#F04864',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#F04864',
                  shadowOffsetX: 0
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside'
                }
              },
              data: result[4].data.slice(0, 10)
            }
          ]
        }

        thisobj.chart.setOption(option)
      },
      function(err) {}
    )
  }
}
</script>
